<template>
	<view class="pageBox" :style="{paddingTop: statusBarHeight + 44 + 'px',}">
		<view class="topHead flex-between" :style="{top: statusBarHeight + 'px',}">
			<uni-icons type="back" size="24" @click="goBack"></uni-icons>
			<view class="title">
				服务中心
			</view>
		</view>

		<view class="topBox">
			<view class="top">
				<image class="avatar" :src="info.avatar" mode=""></image>
				<view class="nickname flex-between">
					<view class="nicknameText">
						{{ info.nickname }}
					</view>

				</view>

				<view class="performance">
					<view class="performanceText flex-center">
						总业绩（元）
					</view>
					<view class="performanceNum flex-center">
						{{ params.total_achievement }}元
					</view>
				</view>

				<view class="team flex-between">
					<view class="teamItem flex-center">
						<view class="teamItemText">
							业绩提成
						</view>
						<view class="teamItemNum">
							{{ params.achievementCommission }}
						</view>

					</view>
					<view class="teamLine">

					</view>
					<view class="teamItem flex-center">
						<view class="teamItemText">
							交易手续费
						</view>
						<view class="teamItemNum">
							{{ params.performance_fee }}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="out">
			<h6>本月</h6>

			<view class="data-box">
				<view>
					<view class="label">新增VIP数量</view>
					<view class="num">{{ params.vipNum }}</view>
				</view>
				<view class="data-box-line">
					
				</view>
				<view>
					<view class="label">新增销售额</view>
					<view class="num">{{ params.achievement }}</view>
				</view>
			</view>

			<h6>上月</h6>

			<view class="data-box">
				<view>
					<view class="label">新增VIP数量</view>
					<view class="num">{{ params.lastVipNum }}</view>
				</view>
				<view class="data-box-line">
					
				</view>
				<view>
					<view class="label">新增销售额</view>
					<view class="num">{{ params.last_achievement }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: "",

				params: {},
				info: {},
			};
		},
		onLoad() {
			this.statusBarHeight = this.$mySysInfo().top;
		},
		onShow() {
			this.getParams();
			this.getInfo();
		},
		methods: {
			getInfo() {
				this.$post({
					module: "User",
					interface: "1000",
				}).then(res => {
					// console.log("info", res)
					this.info = res;
				})
			},
			getParams() {
				this.$post({
					module: 'User',
					interface: 3005,
					data: {
						type: "1",
					}
				}).then(res => {
					// console.log("服务中心", res);
					this.params = res;
				})
			},
			onShuoming() {
				uni.navigateTo({
					url: '/serviceCenter/serviceNote?from=服务中心&type=1'
				})
			},
			goBack() {
				const pages = getCurrentPages()
				if (pages.length === 1) {
					if (typeof params === 'number') {
						history.go(-params)
					} else {
						history.back()
					}
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},
		},
	}
</script>

<style lang="less">
	.pageBox {
		width: 100%;
		min-height: 100vh;
		background-color: #ffffff;
	}

	.topHead {
		background-color: #ffffff;
		height: 88rpx;
		width: 100%;
		padding: 0 32rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 3;

		.title {
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			position: absolute;
			top: 22rpx;
			left: 50%;
			transform: translate(-50%, 0);
		}
	}

	.topBox {
		width: 100%;
		height: 414rpx;
		padding: 94rpx 30rpx 0;
		background-image: url("http://www.bobei.shop/static/third/topHeadBg.png");
		background-repeat: no-repeat;
		background-size: 100% 324rpx;

		.top {
			width: 100%;
			height: 320rpx;
			background: #FFFFFF;
			box-shadow: 0px 4rpx 8rpx 0px rgba(212, 212, 212, 0.25);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			position: relative;
			padding-top: 24rpx;

			.avatar {
				width: 120rpx;
				height: 120rpx;
				border: 4rpx solid #FFFFFF;
				border-radius: 50%;
				position: absolute;
				top: -60rpx;
				left: 0;
				z-index: 1;
			}

			.nickname {
				padding: 0 30rpx 0 144rpx;

				.nicknameText {
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #000000;
				}


			}

			.performance {
				margin-top: 40rpx;

				.performanceText {

					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #000000;
				}

				.performanceNum {
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #F2615F;
					margin-top: 16rpx;
				}
			}

			.team {
				margin-top: 26rpx;
				width: 100%;

				.teamItem {
					width: 49%;
					flex-direction: column;

					.teamItemText {
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
					}

					.teamItemNum {
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #F2615F;
					}
				}

				.teamLine {
					width: 2rpx;
					height: 60rpx;
					background-color: #C6C6C6;
				}
			}
		}
	}



	.out {
		padding: 34rpx;

		h6 {
			margin-top: 28rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #142133;
			line-height: 32rpx;
		}

		.data-box {
			display: flex;
			justify-content: space-around;
			align-items: center;
			text-align: center;
			width: 690rpx;
			height: 142rpx;
			background: #F9F9F9;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin-top: 18rpx;
			
			.data-box-line {
				width: 2rpx;
				height: 60rpx;
				background: #C6C6C6;
			}

			.label {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;

			}

			.num {
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #F2615F;
				margin-top: 8rpx;
			}
		}
	}
</style>
